<template>
  <div class="warp">
    <div class="header">
      <div class="title">个人中心</div>
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @open="handleOpen"
            @close="handleClose"
            background-color="#444"
            text-color="#dcdde1"
            active-text-color="#fff"
            style="width: 160px; height: 47px"
            v-show="isshow"
          >
            <el-submenu v-for="(item, i) in navlist" :key="i" :index="i + ''">
              <template slot="title">
                <i
                  v-if="i == 0"
                  class="el-icon-setting"
                  style="color: #dcdde1"
                ></i>
                <i
                  v-else
                  class="el-icon-video-camera-solid"
                  style="color: #dcdde1"
                ></i>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item
                  v-for="(item2, j) in item.children"
                  :key="j"
                  :index="i + '-' + j"
                  @click="choose(i, j)"
                  >{{ item2 }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
      <el-row class="tac">
        <el-col :span="12">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @open="handleOpen"
            @close="handleClose"
            background-color="#444"
            text-color="#dcdde1"
            active-text-color="#ffd04b"
            style="width: 520px"
            :default-active="activeIndex"
          >
            <el-menu-item
              style="width: 145px; padding: 0 20px"
              v-for="(item, i) in anthorlist"
              :key="i"
              :index="i + ''"
              @click="choose2(i)"
            >
              <i
                v-if="item == '加入群聊'"
                class="el-icon-s-comment"
                style="color: #dcdde1"
              ></i>
              <i
                v-else-if="item == '我的工单'"
                class="el-icon-tickets"
                style="color: #dcdde1"
              ></i>
              <i
                v-else-if="item == '我要发布'"
                class="el-icon-upload"
                style="color: #dcdde1"
              ></i>
              <i v-else class="el-icon-s-home" style="color: #dcdde1"></i>
              <span>{{ item }}</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <div class="logomsg">
        <div class="pic" @click="showMsg">
          <img
            :src="icon"
            alt=""
            width="100%"
            height="100%"
            style="
              object-fit: cover;
              border-radius: 50%;
              object-position: 0 -5px;
            "
          />
        </div>
        <div class="msg">
          <h5>{{ admin }}</h5>
          <div class="state">
            <span>在线</span>
            <span @click="cancellation" class="cancellation">
              <i class="el-icon-eleme"></i>
              注销
            </span>
            <span @click="changemsg">
              <i class="el-icon-eleme"></i>
              修改信息
            </span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">
      <div class="showmsg">
        <div class="item-pic">
          <el-image
            style="
              width: 100%;
              height: 100%;
              border-radius: 50%;
              margin-bottom: 10px;
            "
            :src="icon"
            :preview-src-list="srcList"
          >
          </el-image>
          <i class="el-icon-plus avatar-uploader-icon" style="cursor: pointer"
            >我的头像</i
          >
        </div>
        <div class="show-item">
          <span><i class="el-icon-user-solid"></i>姓名 : </span>
          <span>{{ personmsg.nick_name }}</span>
        </div>
        <div class="show-item">
          <span><i class="el-icon-phone"></i>手机号码 : </span>
          <span>{{ personmsg.phone }}</span>
        </div>
        <div class="show-item">
          <span><i class="el-icon-phone"></i>年龄 : </span>
          <span>{{ personmsg.age }}</span>
        </div>
        <div class="show-item">
          <span><i class="el-icon-s-home"></i>家庭住址 : </span>
          <span>{{ personmsg.home }}</span>
        </div>
        <div class="show-item" v-show="isshow2">
          <span><i class="el-icon-s-finance"></i>我的时薪 : </span>
          <span>{{ personmsg.h_price }}元/时</span>
        </div>
        <div class="show-item" v-show="isshow2">
          <span><i class="el-icon-medal"></i>我的工作 : </span>
          <span>{{ personmsg.work_type }}</span>
        </div>
        <div class="show-item">
          <span><i class="el-icon-watch"></i>账号创建时间 : </span>
          <span>{{ personmsg.ctime }}</span>
        </div>
        <div class="show-item">
          <span><i class="el-icon-watch"></i>最后登录时间 : </span>
          <span>{{ personmsg.ltime }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="修改信息" :visible.sync="dialogVisible2" width="30%">
      <div class="showmsg" style="width: 70%">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm2"
          label-width="80px"
          class="demo-ruleForm"
          label-position="left"
        >
          <el-form-item
            label="姓名 : "
            prop="pname"
            style="margin-bottom: 20px"
          >
            <el-input v-model="personmsg.nick_name"></el-input>
          </el-form-item>
          <el-form-item
            label="手机号 : "
            prop="phonenum"
            style="margin-bottom: 20px"
          >
            <el-input v-model="personmsg.phone"></el-input>
          </el-form-item>
          <el-form-item label="年龄 : " prop="age" style="margin-bottom: 20px">
            <el-input v-model.number="personmsg.age"></el-input>
          </el-form-item>

          <el-form-item
            label="家庭住址 : "
            prop="home"
            style="margin-bottom: 20px"
          >
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              style="height: 50px; width: 251px"
              @change="handleChange"
            >
            </el-cascader>
            <!-- <el-input v-model="ruleForm.home"></el-input> -->
          </el-form-item>
          <el-form-item
            label="我的时薪 : "
            prop="money"
            style="margin-bottom: 20px"
            v-show="isshow2"
          >
            <el-input v-model.number="personmsg.h_price"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')"
              >保存</el-button
            >
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <commenheder />
    <div class="container">
      <div class="show-content">
        <!-- <order /> -->
        <router-view />
      </div>
    </div>
    <commenfooter />
  </div>
</template>

<script>
// import order from "./order";
import commenheder from "../filsh/commheader";
import commenfooter from "@/newproject/home/components/footer.vue";
import { mapMutations } from "vuex";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  components: {
    commenheder,
    commenfooter,
    // order,
  },
  mounted() {
    let t = localStorage.getItem("type");
    if (t == 2) {
      this.isshow = false;
      this.anthorlist.splice(0, 1);
      this.anthorlist.unshift("我的工单");
      this.activeIndex = "0";
      this.icon =
        "http://housekeepi.com/" + window.localStorage.getItem("icon");
      this.srcList.push(this.icon);
    } else {
      this.isshow2 = false;
      this.icon = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2042867885,3348151267&fm=26&gp=0.jpg";
      this.srcList.push(this.icon);
    }
    console.log(t);
    this.admin = localStorage.getItem("pusername");
    scrollTo(0, 0);
    this.personmsg = JSON.parse(localStorage.getItem("personmsg"));
    this.personmsg.ctime = new Date(
      this.personmsg.ctime * 1000
    ).toLocaleString();
    this.personmsg.ltime = new Date(
      this.personmsg.ltime * 1000
    ).toLocaleString();
    if (this.personmsg.work_type == 1) {
      this.personmsg.work_type = "月嫂";
    } else if (this.personmsg.work_type == 2) {
      this.personmsg.work_type = "保洁";
    } else if (this.personmsg.work_type == 3) {
      this.personmsg.work_type = "家政";
    }
    console.log(this.personmsg);
  },
  data() {
    //昵称
    var checkPname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    //手机号
    var checkPhone = (rule, value, callback) => {
      let reg = /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!reg.test(value)) {
        callback(new Error("手机号码有误，请重填"));
      } else {
        callback();
      }
    };
    //邮箱地址
    var checkEmail = (rule, value, callback) => {
      let reg = /^[A-Za-z0-9]+([_\\.][A-Za-z0-9]+)*@([A-Za-z0-9\\-]+\.)+[A-Za-z]{2,6}$/;
      if (value === "") {
        callback(new Error("请输入邮箱地址"));
      } else if (!reg.test(value)) {
        callback(new Error("邮箱地址有误，请重填"));
      } else {
        callback();
      }
    };
    //所属部门
    var checkSection = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入部门"));
      } else {
        callback();
      }
    };
    //年龄
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 18) {
            callback(new Error("必须年满18岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    //时薪
    var checkMoney = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 30 || value > 100) {
            callback(new Error("时薪只能在30-100之间"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      options: regionData,
      selectedOptions: [],
      ruleForm: {
        //手机号
        phonenum: "",
        //昵称
        pname: "",
        //邮箱地址
        email: "",
        //所属部门
        section: "",
        age: "",
        money: "",
        pass: "",
        checkPass: "",
        rname: "",
      },
      personmsg: {},
      navlist: [
        {
          name: "我的订单",
          children: ["我的预约", "我的评论"],
        },
      ],
      anthorlist: ["我要发布", "加入群聊", "返回官网"],
      historylist: [],
      isshow: true,
      admin: "",
      icon: "",
      activeIndex: "",
      srcList: [],
      dialogVisible: false,
      dialogVisible2: false,
      isshow2: true,
      province: "",
      city: "",
      area: "",
      tel: "",
      rules: {
        age: [{ validator: checkAge, trigger: "blur" }],
        pname: [{ validator: checkPname, trigger: "blur" }],
        phonenum: [{ validator: checkPhone, trigger: "blur" }],
        money: [{ validator: checkMoney, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        section: [{ validator: checkSection, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleChange(value) {
      this.province = CodeToText[value[0]];
      this.city = CodeToText[value[1]];
      this.area = CodeToText[value[2]];
    },
    ...mapMutations(["upIdx"]),
    changemsg() {
      this.dialogVisible2 = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("是否保存修改信息", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.myaxios({
                url: "http://housekeepi.com/api/userModify",
                method: "post",
                data: {
                  token: window.localStorage.getItem("token"),
                  nick_name: this.personmsg.nick_name, //姓名
                  province: this.province, //省
                  h_price: this.personmsg.h_price, //时薪
                  city: this.city, //市
                  area: this.area, //区
                  age: this.personmsg.age, //年龄
                  phone: this.personmsg.phone,
                  // work_type:Number(this.type),//家政类型
                  // icon: this.zhengjian, //证件照片
                  // address: this.service, //服务类型
                  // content: JSON.stringify([{ age: this.age }]),
                },
              }).then((res) => {
                this.dialogVisible2 = false;
              });

              // this.personForm.phonenum = this.ruleForm.phonenum;
              // this.personForm.pname = this.ruleForm.pname;
              // this.personForm.email = this.ruleForm.email;
              // this.personForm.section = this.ruleForm.section;
              this.$message({
                type: "success",
                message: "修改成功!请重新登录",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "操作取消",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    showMsg() {
      this.dialogVisible = true;
    },
    choose(i, j) {
      // console.log(i, j);
      // if (i == 0) {
      //   if (window.location.href.indexOf("/recommend") == -1) {
      //     this.$router.push("/recommend");
      //   }
      //   this.upIdx(j + 1 + "");
      // } else
      if (i == 0) {
        if (j == 0) {
          this.$router.push("/order1");
        } else if (j == 1) {
          this.$router.push("/comments");
        }
      }
    },
    choose2(i) {
      if (i == 0) {
        if (this.anthorlist[0] == "我要发布") {
          this.$router.push("/release");
        } else if (this.anthorlist[0] == "我的工单") {
          this.$router.push("/order");
        }
      } else if (i == 1) {
        this.$router.push("/successone");
      } else if (i == 2) {
        this.$router.push("/");
      }
    },
    setpw() {
      this.$router.push("/forget");
    },
    cancellation() {
      localStorage.setItem("token", false);
      localStorage.setItem("type", 0);
      this.$router.push("/");
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    setpw() {
      this.$router.push("/forget");
    },
    // //添加历史记录

    // phistory(i) {
    //   let res = this.historylist[i];
    //   let r;
    //   if (res == "个人中心") {
    //     r = "/personmsg";
    //   } else {
    //     this.navlist.forEach((item, i) => {
    //       if (item.children.includes(res)) {
    //         let idx = item.children.indexOf(res);
    //         r = `/${i}-${idx}`;
    //       }
    //     });
    //   }
    //   this.$router.push({
    //     path: r,
    //   });
    //   this.historylist.splice(i, 1);
    //   this.historylist.push(res);
    // },
    // //个人中心
    // personmsg() {
    //   this.$router.push({
    //     path: "/personmsg",
    //   });
    //   if (this.historylist.includes("个人中心")) {
    //     this.historylist.splice(this.historylist.indexOf("个人中心"), 1);
    //   }
    //   this.historylist.push("个人中心");
    // },
    cancel() {
      this.$confirm("是否注销登录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.setItem("token", null);
          this.$message({
            type: "success",
            message: "注销成功!",
          });
          this.$router.push({
            path: "/login",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>

<style scoped>
.showmsg {
  width: 85%;
  margin: 0 auto;
  padding-bottom: 15px;
}
.showmsg .item-pic {
  width: 100px;
  height: 115px;
  display: flex;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.showmsg .show-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  color: #718093;
  margin-bottom: 10px;
}
.avatar-uploader-icon {
  margin-left: -7px;
  font-weight: bold;
  font-size: 13px;
  color: #8c939d;
  height: 10px;
  text-align: center;
  position: relative;
}
.avatar-uploader-icon:hover {
  color: #487eb0;
}
.avatar-uploader-icon::before {
  position: absolute;
  right: -13px;
}
* {
  margin: 0;
}
*::selection {
  background: none;
}
.warp {
  background: #fff;
}
.header {
  margin-top: -4px;
  background: #444;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  display: flex;
  padding-top: 5px;
  /* margin-bottom: 20px; */
}
.container {
  width: 80%;
  margin: 0 auto;
}
.container::after {
  content: "";
  display: block;
  clear: both;
}
.header::after {
  display: block;
  content: "";
  clear: both;
}
.header .title {
  width: 220px;
  background: #444;
  /* padding: 10px 0; */
  line-height: 47px;
  text-align: center;
  letter-spacing: 1.5px;
  float: left;
}
.aside-menu {
  /* height: 92vh; */
  width: 220px;
  float: left;
  background: #487eb0;
  padding-top: 10px;
  box-sizing: border-box;
}
.pic {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  padding-left: 15px;
  cursor: pointer;
}
.el-menu--horizontal > .el-menu-item {
  height: 46px;
  line-height: 46px;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.logomsg {
  display: flex;
  align-items: center;
  /* float: right; */
  margin-left: 350px;
}
.msg {
  margin-left: 15px;
  color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.msg h5 {
  color: #ccc;
  margin-bottom: 5px;
}
.msg .state {
  font-size: 13px;
}
.msg .state span {
  position: relative;
  margin-left: 14px;
}
.msg .state span:first-child::before {
  position: absolute;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #27ae60;
  left: -15px;
  top: 4px;
}
i.el-icon-eleme {
  color: #f40;
}
.history {
  height: 62px;
  padding-left: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.history span {
  cursor: pointer;
  margin-right: 5px;
}
.history span:hover {
  color: #192a56;
}
.state span:last-child:hover {
  cursor: pointer;
  color: #e84118;
}
.show-content {
  width: 100%;
  float: left;
  /* padding: 10px 0 0 7px; */
  box-sizing: border-box;
  /* background: #dcdde1; */
}

.model-box {
  width: 60%;
  height: 92vh;
  float: left;
  background: #3498db;
}
.anthor .item {
  font-size: 14px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  margin: 10px 0;
}
.cancellation:hover {
  color: rgb(232, 65, 24);
  cursor: pointer;
}
</style>